<template>
  <div class="bg">
    <el-card class="box-card">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/role' }">角色管理</el-breadcrumb-item>
          <el-breadcrumb-item>新建角色</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="mainBox">
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col>
                <el-form-item label="角色" prop="roleName">
                  <el-input v-model="ruleForm.roleName" placeholder="请输入角色" maxlength="20" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="状态">
                  <el-radio-group v-model="ruleForm.roleStatus">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="2">禁用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="可用权限">
                  <el-tree
                    ref="tree"
                    :props="propsData"
                    :data="menuList"
                    :default-checked-keys="checkedKeys"
                    show-checkbox
                    node-key="menuId"
                  ></el-tree>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item>
                  <el-button size="small" @click="sure('ruleForm')" type="primary">提交</el-button>
                  <el-button size="small" @click="goback">返回列表</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "setoper",
  data() {
    return {
      propsData: {
        label: "menuName",
        children: "childMenuList"
      },
      rules: {
        roleName: [{ required: true, message: "请输入角色", trigger: "blur" }]
      },

      checkedKeys: [], //获取数组

      // 提交表单
      ruleForm: {
        roleName: "",
        roleStatus: 1,
        menuIdList: []
      },

      menuList: []
    };
  },
  created() {
    this.getMenuList();
    // 获取用户id查看详情
    setTimeout(() => {
      if (this.$route.query.roleId) {
        this.$http.article
          .getrole({ roleId: this.$route.query.roleId })
          .then(res => {
            this.ruleForm = res.result;
            var childIdList = [];
            for (var i = 0; i < res.result.yjMenuList.length; i++) {
              if (1 == res.result.yjMenuList[i].menuLevel) {
                if (res.result.yjMenuList[i].childMenuList.length == 0) {
                  childIdList.push(res.result.yjMenuList[i].menuId);
                }
                var yjMenuList = res.result.yjMenuList[i];
                for (var j = 0; j < yjMenuList.childMenuList.length; j++) {
                  childIdList.push(yjMenuList.childMenuList[j].menuId);
                }
              }
            }
            this.checkedKeys = childIdList;
            console.log("菜单", childIdList);
          });
      }
    });
  },
  methods: {
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = this.$refs.tree.getCheckedNodes(false, true);

          let val = Array.from(data, item => {
            return item.menuId;
          });
          this.ruleForm.menuIdList = val;
          console.log("修改获取", val);

          if (this.$route.query.roleId) {
            if (this.ruleForm.menuIdList.length == 0)
              return this.$message.warning("请勾选可用权限");
            this.$http.article
              .updaterole({
                ...this.ruleForm,
                roleId: parseInt(this.$route.query.roleId)
              })
              .then(res => {
                this.$message.success("修改成功");
                this.$router.push("/home/role");
                console.log(res);
              });
          } else {
            // 新增角色名称
            if (this.ruleForm.menuIdList == "") {
              this.$message.error("请选择相关权限");
            }
            if (this.ruleForm.roleName == "") {
              this.$message.error("角色名称为空");
            } else {
              console.log("获取新的数据", this.ruleForm);
              this.$http.article.roleinsert(this.ruleForm).then(res => {
                if (res.code == 200) {
                  this.$message.success("新增角色成功");
                  this.$router.push("/home/role");
                }
                console.log(res);
              });
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // sure() {
    //   let data = this.$refs.tree.getCheckedNodes(false, true);

    //   let val = Array.from(data, item => {
    //     return item.menuId;
    //   });
    //   this.ruleForm.menuIdList = val;
    //   console.log("修改获取", val);

    //   if (this.$route.query.roleId) {
    //     this.$http.article
    //       .updaterole({
    //         ...this.ruleForm,
    //         roleId: parseInt(this.$route.query.roleId)
    //       })
    //       .then(res => {
    //         this.$message.success("修改成功");
    //         this.$router.push("/home/role");
    //         console.log(res);
    //       });
    //   } else {
    //     // 新增角色名称
    //     if (this.ruleForm.menuIdList == "") {
    //       this.$message.error("请选择相关权限");
    //     }
    //     if (this.ruleForm.roleName == "") {
    //       this.$message.error("角色名称为空");
    //     } else {
    //       console.log("获取新的数据", this.ruleForm);
    //       this.$http.article.roleinsert(this.ruleForm).then(res => {
    //         if (res.code == 200) {
    //           this.$message.success("新增角色成功");
    //           this.$router.push("/home/role");
    //         }
    //         console.log(res);
    //       });
    //     }
    //   }
    // },

    // 获取全部列表
    getMenuList() {
      this.$http.article.meuList().then(res => {
        this.menuList = res.result;
      });
    },

    //返回上一页面
    goback() {
      this.$router.push("/home/role");
    }
  }
};
</script>

<style scoped lang="scss">
.mainBox {
  padding-top: 60px;
  width: 60%;
  margin: 0 auto;
}
.box-card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
}
</style>